<template>
	<view class="container">
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="content col_between">
			<view class="logo flex_center">
				<image style="width: 400rpx;" src="../../static/img/logo.png" mode="widthFix">
				</image>
			</view>
			<view class="status col_center">
				<view class="title">{{$t('加载中')}}</view>
				<image class="status_logo" src="../../static/img/loading.png">
				</image>
				<view class="text">{{stautsText}}...</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stautsText: this.$t('启动中'),
				timer: null
			};
		},
		onShow() {
			this.statusChange()
		},
		methods: {
			statusChange() {
				console.log(111)
				let time = 0
				this.timer = setInterval(() => {
					time++
					if (time == 1) {
						this.stautsText = this.$t('正在确认APP版本')
					} else if (time == 2) {
						this.stautsText = this.$t('正在获取APP信息')
					} else if (time == 3) {
						this.stautsText = this.$t('根据发行经纪人获取权证信息')
					} else if (time == 4) {
						this.stautsText = this.$t('主机位于同一位置并已连接')
					} else if (time == 5) {
						clearInterval(this.timer)
						uni.switchTab({
							url: "/pages/home/home"
						})
					}
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes changeHeight {
		0% {
			height: 400rpx;
		}

		50% {
			height: 200rpx;
		}

		100% {
			height: 400rpx;
		}
	}

	@keyframes changeOpacity {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.container {
		height: 100vh;

		.content {
			flex: 1;

			.logo {
				animation: changeHeight 3s infinite ease-in-out;
			}

			.status {
				.title {
					color: #9a96af;
					font-size: 52rpx;
					font-weight: 700;
					margin-bottom: 50rpx;

				}

				.status_logo {
					width: 160rpx;
					height: 160rpx;
					animation: changeOpacity 3s infinite ease-in-out;
				}

				.text {
					color: #9a96af;
					font-size: 28rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>